<template>
	<div class="header" :style="{'background-color':showHeader||showindex!=0?'#fff':''}">
		<div class="header-m flex-r">
			<div class="flex1 flex flex-a">
				<img v-if="showHeader||showindex!=0" class="is-cur" @click="ontab(0)" style="width: 165px;height: 73px;margin-left: 10px;"
					src="@/assets/img/tianhua01.png" alt="">
				<img v-else  @click="ontab(0)" class="is-cur" style="width: 165px;height: 73px;margin-left: 10px;" src="@/assets/img/tianhua01.png"
					alt="">
					
			</div>
			<div class="flex-r">
				<div class="flex-r" style="width: 548px;line-height: 80px;font-size: 14px;font-weight: 800;"
					:style="{color:showHeader||showindex!=0?'#000':'#fff'}">
					<div class="flex1 but is-cur" v-for="(item,index) in headerList"
						:style="{color:showindex==index?'#ea5514':''}" :key="index" @click="ontab(index)">
						{{item.name}}
					</div>
				</div>
				<div style="width: 207px;line-height: 80px;font-size: 16px;color: #ea5514;font-weight: 800;text-align: right;">
					咨询热线:132-0666-5005
				</div>

			</div>
			
	
		</div>
	</div>
</template>

<script lang="ts" setup>
	
	const emit = defineEmits([
		'ontab',
	])
	const {
		showHeader,
		headerList
	} = defineProps({
		showHeader: {
			type: Boolean
		},
		showindex: {
			type: Boolean
		},
		headerList: {
			type: Object
		},
	
	})
	
	const ontab = (val : any) => {
		emit('ontab',val)
	}
	const ontabs = (val : any) => {
		
	}
</script>

<style lang="scss" scoped>

	.header {
		height: 80px;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
	
		.header-m {
			width: $width;
			height: 100%;
			margin: 0 auto;
	
			.but {
				&:hover {
					color: $color;
				}
			}
	
			.but:nth-child(1) {
				text-align: center;
			}
	
		}
	}
</style>